<template lang="html">
  <div class="chat">
    <div class="chat-nav">
      <router-link class="back-icon" to='/deer' tag='div'> </router-link>
      {{this.$route.params.chatName}}
      <router-link class="setting" to='/setting' tag='div'>设置 </router-link>
    </div>
    <div class="chat-block">
      <div class="chat-content" v-for='(item,index) in chatData1' :key='index'>
        <div class="chat-img">
          <!-- <img :src="this.$route.params.img" alt=""> -->
          <img src="../../assets/pics/luyou_01.png" alt="">
        </div>
        <span class="chat-msg">
           {{ item.content }}
        </span>
      </div>
      <div class="my-msg" v-if='value.length'>
        <div class="chat-img">
          <!-- <img :src="this.$route.params.img" alt=""> -->
          <img src="../../assets/pics/luyou_02.png" alt="">
        </div>
        <span class="chat-msg">
           {{ value }}
        </span>

      </div>
    </div>
    <div class="send-message">
      <input type="text" name="" value="" ref='input'>
      <div class="close-icon"  @click='closeHandle'></div>
      <div class="send" @click='sendMsg'>
        发送
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      msg:'',
      value:'',
      chatData1:[
        {
          name:'one',
          content:'嘿，老铁！'
        },

        {
          name:'one',
          content:'有钱没，有钱没，有钱没，有钱没，有钱没，有钱没，有钱没，'
        },

        {
          name:'one',
          content:'霸气，不多，两万'
        },

        {
          name:'one',
          content:'...自己留着吧！'
        }
      ],
      chatData2:[
        {
          name:'two',
          content:'在呢，老铁，说！'
        },
        {
          name:'two',
          content:'有,要多少'
        },
        {
          name:'two',
          content:'银行卡里还有200，都给你'
        }
      ]
    }
  },
  methods:{
    sendMsg(event){
      this.value = this.$refs.input.value;
    },
    closeHandle(event){
      this.$refs.input.value = '';
    }
  }
}
</script>

<style lang="css" scoped>
.chat-nav{
  width:100%;
  height:0.8rem;
  background-color: #7DD19D;
  font-size: 0.36rem;
  text-align: center;
  padding: 5px 10px;
  box-sizing: border-box;
}
.back-icon{
  background: url('../../assets/icon/return.png');
  background-size: 100% 100%;
  width: 0.2rem;
  height: 0.45rem;
  display: inline-block;
  position: absolute;
  top: 0.15rem;
  left: 0.2rem;
}
.setting{
  height:100%;
  display: inline-block;
  float: right;
  font-size: 0.3rem;
  padding-top: 0.1rem;
}
.chat-block{
  width:100%;
  height:500px;
}
.send-message{
  width:100%;
  height:0.8rem;
  background-color: #fff;
  position:fixed;
  bottom:0;
  padding:0.1rem 0.2rem;
  box-sizing: border-box;
}
.send-message input{
  width: 5rem;
  height: 0.55rem;
  border: 1px solid #B3B3B3;
  border-radius: 0.1rem;
  float: left;
  padding:0.1rem;
  box-sizing: border-box;
  font-size: 0.3rem;
}
.send{
  box-sizing: border-box;
  width: 1.1rem;
  height: 0.45rem;
  display: inline-block;
  float: right;
  font-size: 0.25rem;
  border: 1px solid #B3B3B3;
  border-radius: 0.2rem;
  text-align: center;
  margin-top: 0.05rem;
  padding-top: 0.05rem;
  letter-spacing: 0.06rem;
}
.chat-block{
  padding:10px;
  box-sizing: border-box;
}
.chat-content,.my-msg{
  width:95%;
  padding:5px;
  box-sizing: border-box;
  display: inline-flex
}
.chat-img{
  width:0.8rem;
  height:0.8rem;
  float:left;
  display: flex;
}
.chat-img img{
  width: 100%;
  height: 100%;
}
.chat-msg{
  background-color: #fff;
  font-size: 0.25rem;
  text-align: left;
  padding: 0 0.2rem;
  border-radius: 0.2rem;
  margin-left: 0.1rem;
  padding: 0.2rem;
  max-width: 5rem;
  display: inline-block;
  word-wrap: break-word;
}
.close-icon{
  background: url(/static/img/close.0cdefe0.png) no-repeat;
  background-size: 100% 100%;
  z-index: 999;
  width: 0.2rem;
  height: 0.2rem;
  display: inline-block;
  position: absolute;
  top: 0.3rem;
  right: 2.5rem;
}
</style>
